<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2024-02-20 14:54:40
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: Tabs 标签页
 * @FilePath: \basic-module\components\tab\tab.vue
-->
<template>
  <view class="tab">
    <view class="single" :class="{ 'active': active == v.id }" v-for="v in param.list" :key="v.id" @click="check(v.id)">
      <view class="title">{{ v.title }}</view>
      <view class="line"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tab",
  components: {},
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
    screen: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      active: this.screen[this.param.match]
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    check(v) {
      this.active = v;
      this.$emit('change', this.active);
    },
  },
};
</script>
<style lang='less' scoped>
.tab {
  .flex(row, space-around);
  width: 100%;
  height: 86upx;
  font-size: 32upx;
  color: #999999;
  background-color: #ffffff;
}

.single {
  position: relative;
  .flex(column, center, center);
  height: 100%;

  .line {
    position: absolute;
    bottom: 10upx;
    width: 70upx;
    height: 8upx;
    border-radius: 8upx;
  }
}

.single.active {
  .title {
    color: #333333;
    font-weight: bold;
  }

  .line {
    background-color: #00B578;
  }
}
</style>